<template>
  <div class="select">

    <!-- 提示信息 -->
    <el-alert
      style="margin-bottom: 20px; height: 35px"
      :closable="false"
      type="info"
      show-icon
    >数据一共 {{ counts }} 条</el-alert>

    <!-- 列表数据 -->
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background:'#fafafa'}"
        :row-style="{height:'100%'}"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="250"
        />
        <el-table-column
          prop="subject"
          label="学科"
          width="100"
        />
        <el-table-column
          prop="catalog"
          label="目录"
        />
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="formatter2"
        />
        <el-table-column
          label="题干"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.question" />
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          prop="address"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-else-if="scope.row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="录入人"
          prop="creator"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.creator" />
          </template>
        </el-table-column>
        <el-table-column
          label="审核状态"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.chkState === 0">待审核</span>
              <span v-else-if="scope.row.chkState === 1">通过</span>
              <span v-else>拒绝</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="审核意见"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.chkRemarks" />
          </template>
        </el-table-column>
        <el-table-column
          label="审核人"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.chkUser" />
          </template>
        </el-table-column>
        <el-table-column
          label="发布状态"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.publishState === 0">下架</span>
              <span v-else-if="scope.row.publishState === 1">已上架</span>
              <span v-else>待发布</span>
            </div>

          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          width="180px"
          fixed="right"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                style="width:15%"
                @click="detail(scope.row)"
              >预览</el-button>
              <el-button
                type="text"
                :disabled="scope.row.chkState !== 0"
                style="width:15%"
                @click="review(scope.row)"
              >审核</el-button>

              <el-button
                type="text"
                :disabled="scope.row.publishState !== 0"
                style="width:15%"
                @click="$router.push({ path: '/questions/new?id=' + scope.row.id })"
              >修改</el-button>

              <el-button
                type="text"
                :disabled="scope.row.chkState !== 1"
                style="width:15%"
                @click="goToTheShelf(scope.row)"
              >{{ scope.row.publishState === 1 ? "下架" : "上架" }}</el-button>
              <el-button
                type="text"
                style="width:15%"
                :disabled="scope.row.publishState === 1"
                @click="Delet(scope.row)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 预览弹出框 -->
      <questions-preview
      :dialog-visible="dialogVisible"
      :question-item="questionItem"
      @close="dialogVisible = false" />

      <!-- 审核弹出框 -->
      <div class="Auditdialog">
        <el-dialog
          v-if="titleReview"
          title="题目审核"
          :visible.sync="titleReview"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <quest-audit
            :review-info-id="reviewInfoId"
            @close="closeFn"
            @requestData="requestData"
          />
        </el-dialog>
      </div>

    </el-card>

  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { difficulty, questionType, chkType, publishType } from '@/api/hmmm/constants'
import questionsPreview from './questions-previewtl'
import QuestAudit from './questaudit'

export default {

  components: {
    questionsPreview,
    QuestAudit
  },
  props: {
    tableData: {
      type: Array,
      default () {
        return []
      }
    },
    counts: {
      type: [Number, String],
      default () {
        return []
      }
    }
  },
  data () {
    return {

      titleReview: false, // 试题审核对话框
      testPreviewDialog: false, // 预览弹出层
      // alertText: '数据一共五条', // 筛选提示共几条数据
      reviewInfoId: {}, // 审核试题id
      checkInfoId: {}, // 试题信息id
      questionItem: {}, // 预览时传入子组件的试题
      dialogVisible: false// 试题预览
    }
  },
  created () {

  },
  methods: {
    // 点击预览
    async detail (item) {
      // 显示对话框
      const { data } = await detail({ id: item.id })
      data.questionType = item.questionType
      data.subject = item.subject
      this.dialogVisible = true
      // 传入试题
      this.questionItem = data
    },
    // 删除按钮
    async Delet (row) {
      console.log(row)
      this.$emit('delet', row)
    },
    // 上下架按钮
    goToTheShelf (row) {
      console.log(row)
      this.$emit('goToTheShelf', row)
    },
    // 审核按钮
    review (row) {
      this.titleReview = true
      this.reviewInfoId = row
    },
    // 子传父关闭审核对话框事件
    closeFn () {
      this.titleReview = false
    },
    // 子传父重新获取数据事件
    requestData () {
      this.$emit('requestData')
    },
    // 关闭窗口
    close () {
      this.testPreviewDialog = false
    },
    // 难度枚举
    formatter1 (row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value === Number(cellValue))
      return obj.label
    },
    // 题型枚举
    formatter2 (row, column, cellValue, index) {
      let obj = questionType.find((item) => item.value === Number(cellValue))
      if (!obj) obj = { label: '小李' }
      return obj.label
    },
    // 审核状态枚举
    formatter3 (row, column, cellValue, index) {
      // debugger 断点
      const obj = chkType.find((item) => item.value === cellValue)
      return obj.label
    },
    // 发布状态枚举
    formatter4 (row, column, cellValue, index) {
      if (row.chkState === 1) {
        const obj = publishType.find((item) => item.value === cellValue)
        return obj.label
      } else {
        return publishType[2].label
      }
    },
    // 审核按钮
    Audit (row) {
      console.log(row)
      this.titleReview = true
      this.reviewInfoId = row
    },
    // 点击预览
    preview (row) {
      this.testPreviewDialog = true // 打开预览
      console.log(row)
      this.checkInfoId = row
    }

  }
}
</script>

<style scoped>
.alert{
  background-color: #e5e7ed;
}
.el-tabs__item{
  border: 1px solid rgb(206, 23, 23);
}
</style>
